<template>
    <Slider v-model="color" @update:modelValue="onChange" style="width: 90%;" :max="100"/>
  </template>
  
  <script setup>
  import { Slider } from '@ckpack/vue-color';
  const color = defineModel()
  const emit = defineEmits(["colorChange"])
  const onChange = (val) => {
    color.value= val.hex
    console.log(val);
    emit('colorChange')
  }
  </script>
  <style scoped>
  :deep(.vc-slider-swatches) {
    display: none !important;
  }
  :deep(.vc-slider-hue-warp) {
    height: 32px;
    border-radius: 32px !important;
    overflow: hidden;
  }
  :deep(.vc-hue-picker) {
    width: 27px !important;
    height: 27px !important;
    border-radius: 27px !important;
    background: #683CC3 !important;
    border: 3px solid #FFFFFF;
    position: relative;
  }
  :deep(.vc-hue-picker::after) {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-radius: 10px;
  }
  </style>
  
  